<template>
  <div class="container">
    <el-input :placeholder="$t('请输入命令')" type="textarea" :autosize="{ minRows:1}" v-model="command_str">
    </el-input>
    <el-button class="botton" type="primary" @click="submitForm(command_str)">{{$t('提交')}}</el-button>
    <pre id="jsonShow"></pre>
  </div>

</template>

<script>
import { sendCommandData } from '@/api/menu'
import Cookies from 'js-cookie'
export default {
  name: 'Command',
  data () {
    return {
      command_str: ''
    }
  },
  created () {
    // var session_id = sessionStorage.getItem('system_key')
    var session_id = Cookies.get('system_key')
    if (session_id == null) {
      this.$router.push('/login')
    }
  },
  methods: {
    submitForm (command_str) {
      var _this = this
      if (_this.command_str !== '') {
        let formData = {}
        // formData.session_id = sessionStorage.getItem('system_key')
        formData.session_id = Cookies.get('system_key')
        formData.command = _this.command_str
        sendCommandData(formData).then((response) => {
          console.log(response)
          if (response.status === -1) {
            alert(response.msg)
          } else {
            document.getElementById('jsonShow').innerHTML = ''
            document.getElementById('jsonShow').innerHTML = this.JsonShowFn(response) // json为要展示到页面的数据
          }
        })
        // this.$axios.post('member/command/', this.$qs.stringify(formData)).then((response) => {
        //   console.log(response.info)
        //   if (response.info.status === -1) {
        //     alert(response.info.msg)
        //     this.$router.push('/login')
        //   } else {
        //     document.getElementById('jsonShow').innerHTML = ''
        //     document.getElementById('jsonShow').innerHTML = this.JsonShowFn(response) // json为要展示到页面的数据
        //   }
        // })
      } else {
        document.getElementById('jsonShow').innerHTML = ''
      }
    },
    JsonShowFn (json) {
      if (typeof json !== 'string') {
        json = JSON.stringify(json, undefined, 2)
      }
      json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>')
      return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+-]?\d+)?)/g, function (match) {
        var cls = 'color: #41d412;' // 数字
        if (/^"/.test(match)) {
          if (/:$/.test(match)) {
            cls = 'color: #a01313;' // key
          } else {
            cls = 'color: #1448b4;' // 值
          }
        } else if (/true|false/.test(match)) {
          cls = 'color: #46bb1b;' // boolean
        } else if (/null/.test(match)) {
          cls = 'color: #c47d23;' // null
        }
        return '<span style="' + cls + '">' + match + '</span>'
      })
    }
  }
}
</script>

<style scoped>
.container {
  width: 80%;
  margin: 30px auto;
}
.botton {
  margin: 3%;
}
pre {
  outline: 1px solid #ccc;
  text-align: left;
  white-space: pre-wrap;
  word-wrap: break-word;
}
</style>
